<template>
	<view class="page-body">
		<el-row :gutter="15">
			<el-form ref="form1" :model="form1" :rules="rules" size="medium" label-width="100px">
				<el-col :span="16">
					<el-form-item label="课程标题" prop="title">
						<el-input v-model="form1.title" placeholder="请输入课程标题" clearable :style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="课程分类" prop="category_ids">
						<el-cascader v-model="form1.category_ids" :options="options"
							:props="{ value: '_id', label: 'name' }" clearable :style="{width: '100%'}"></el-cascader>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="课程讲师" prop="teacher_ids">
						<vk-data-input-remote-select v-model="form1.teacher_ids" placeholder="请选择教师"
							:disabled="disabled" action="admin/system/user/sys/getTeachrList"
							:props="{ list: 'rows', value: '_id', label: 'nickname' }" width="300px" show-all
							:limit="3"></vk-data-input-remote-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="课程封面" prop="thumb" required>
						<vk-data-input-file-select v-model="form1.thumb" placeholder="请选择图片" file-type="image">
						</vk-data-input-file-select>
						<!-- <vk-data-upload v-model="form1.thumb" :limit="1"></vk-data-upload> -->
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="课程标签" prop="dynamicTags">
						<el-tag :key="tag" v-for="tag in form1.dynamicTags" closable :disable-transitions="false"
							@close="handleClose(tag)">
							{{tag}}
						</el-tag>
						<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput"
							size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"
							maxlength="6">
						</el-input>
						<el-button v-else class="button-new-tag" size="small" @click="showInput"
							v-show="form1.dynamicTags.length < 4">+ 添加标签</el-button>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="课程售价" prop="charge">
						<vk-data-input-money v-model="form1.charge" placeholder="请输入课程售价" :rightText="'元'" width="100%">
						</vk-data-input-money>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="课程原价" prop="charge_original">
						<vk-data-input-money v-model="form1.charge_original" placeholder="请输入课程原价" :rightText="'元'"
							width="100%">
						</vk-data-input-money>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="预计开播时间" prop="published_at">
						<el-date-picker type="datetime" v-model="form1.published_at" format="yyyy-MM-dd HH:mm:ss"
							value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择预计开播时间" clearable>
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="有效天数" prop="validity_period">
						<el-input-number v-model="form1.validity_period" :min="1" :style="{width: '100%'}">
						</el-input-number>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="课程状态" prop="is_show">
						<el-select v-model="form1.is_show" placeholder="请选择课程状态" clearable :style="{width: '100%'}">
							<el-option v-for="(item, index) in is_showOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="是否推荐" prop="is_rec">
						<el-select v-model="form1.is_rec" placeholder="请选择是否推荐" clearable :style="{width: '100%'}">
							<el-option v-for="(item, index) in is_recOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="课程简介" prop="short_description">
						<el-input v-model="form1.short_description" type="textarea" placeholder="请输入课程简介"
							:autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="详细介绍" prop="render_desc">
						<vk-data-input-editor v-model="form1.render_desc" placeholder="请输入详细介绍" width="100%">
						</vk-data-input-editor>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="24">
					<el-form-item label="常见问题" prop="common_problem">
						<vk-data-input-editor v-model="form1.common_problem" placeholder="请输入常见问题" width="100%">
						</vk-data-input-editor>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="核心知识点" prop="center_info">
						<vk-data-input-editor v-model="form1.center_info" placeholder="请输入核心知识点" width="100%">
						</vk-data-input-editor>
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item label="考前分析" prop="before_exam">
						<vk-data-input-editor v-model="form1.before_exam" placeholder="请输入考前分析" width="100%">
						</vk-data-input-editor>
					</el-form-item>
				</el-col> -->
				<el-col :span="24">
					<el-form-item size="large">
						<el-button type="primary" @click="submitForm">提交</el-button>
						<el-button @click="resetForm">重置</el-button>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
	</view>
</template>
<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	export default {
		props: ['action', 'form-type', 'item'],
		components: {},
		data() {
			return {
				inputVisible: false,
				inputValue: '',
				disabled: false,
				form1: {
					title: undefined,
					category_ids: undefined,
					teacher_ids: undefined,
					thumb: null,
					dynamicTags: [],
					charge: undefined,
					charge_original: 0,
					published_at: null,
					is_show: 1,
					is_rec: 0,
					validity_period: 360,
					// comment_status: 1,
					short_description: undefined,
					render_desc: null,
					common_problem: null,
					center_info: null,
					before_exam: null
				},
				rules: {
					title: [{
						required: true,
						message: '请输入课程标题',
						trigger: 'blur'
					}],
					category_ids: [{
						required: true,
						message: '请选择分类',
						trigger: 'blur'
					}],
					teacher_ids: [{
						required: true,
						message: '请选择授课教师',
						trigger: 'blur'
					}],
					charge: [{
						required: true,
						message: '请输入课程售价',
						trigger: 'blur'
					}],
					charge_original: [],
					published_at: [{
						required: true,
						message: '请选择上架时间',
						trigger: 'change'
					}],
					is_show: [{
						required: true,
						message: '请选择课程状态',
						trigger: 'change'
					}],
					is_rec: [{
						required: true,
						message: '请选择是否推荐',
						trigger: 'change'
					}],
					validity_period: [{
						required: true,
						message: '请选择有效时间',
						trigger: 'change'
					}],
					// comment_status: [{
					// 	required: true,
					// 	message: '请选择评论开关',
					// 	trigger: 'change'
					// }],
					short_description: [{
						required: true,
						message: '请输入课程简介',
						trigger: 'blur'
					}],
					render_desc: [{
						required: true,
						message: '请输入详细介绍',
						trigger: 'blur'
					}],
					common_problem: [{
						required: true,
						message: '请输入常见问题',
						trigger: 'blur'
					}],
				},
				is_showOptions: [{
					"label": "显示",
					"value": 1
				}, {
					"label": "隐藏",
					"value": 0
				}],
				is_recOptions: [{
					"label": "是",
					"value": 1
				}, {
					"label": "否",
					"value": 0
				}],
				// comment_statusOptions: [{
				// 	"label": "关闭评论",
				// 	"value": 0
				// }, {
				// 	"label": "所有人",
				// 	"value": 1
				// }, {
				// 	"label": "仅购买",
				// 	"value": 2
				// }],
				options: [],
				options2: []
			}
		},
		//监听-页面每次【加载时】执行(如:前进)
		onLoad(options = {}) {},
		created() {
			that = this;
			vk = that.vk;
			if (this.formType == "update") {
				let obj = this.item
				obj.category_ids = []
				if (obj.category_parent_id &&
					obj.category_parent_id != obj.category_id) {
					obj.category_ids.push(obj.category_parent_id)
				}
				if (obj.category_id) obj.category_ids.push(obj.category_id)
				this.form1 = obj
				if (!this.form1.dynamicTags) this.form1.dynamicTags = []
			}
			console.log(vk.getVuex('$user.userInfo').role[0])
			if (vk.getVuex('$user.userInfo').role[0] == 'teacher') {
				this.form1.teacher_ids = vk.getVuex('$user.userInfo')._id
				this.disabled = true
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			//页面数据初始化函数
			init(options) {
				vk.callFunction({
					url: 'admin/video_course/category/sys/categories',
					title: '加载中...',
					success(data) {
						let obj = data.rows
						// 删除空children
						function fn(arr) {
							return arr.map((item, index) => {
								if (item.children.length > 0) {
									fn(item.children)
								} else {
									delete item.children
								}
								return item;
							})
						}
						that.options = fn(obj);
					}
				})
			},

			handleClose(tag) {
				this.$forceUpdate()
				this.form1.dynamicTags.splice(this.form1.dynamicTags.indexOf(tag), 1);
			},
			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},
			handleInputConfirm() {
				let inputValue = this.inputValue;
				if (inputValue) {
					for (let i = 0; i < this.form1.dynamicTags.length; i++) {
						if (this.form1.dynamicTags.indexOf(inputValue) != -1) {
							this.$message({
								message: '标签内容重复，请重新输入',
								type: 'warning'
							});
							this.inputVisible = false;
							this.inputValue = '';
							return
						}
					}
					this.form1.dynamicTags.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			},

			submitForm() {
				this.$refs['form1'].validate(valid => {
					if (!valid) return
					vk.callFunction({
						url: this.action,
						title: '提交中...',
						data: this.form1,
						success(data) {
							that.$emit("success")
						}
					});
				})
			},
			resetForm() {
				this.$refs['form1'].resetFields()
			}
		},
		// 监听器
		watch: {},
		// 过滤器
		filters: {},
		// 计算属性
		computed: {},
	}
</script>
<style lang="scss" scoped>
	.el-upload__tip {
		line-height: 1.2;
	}

	.page-body {
		max-width: 1200px !important;
		margin: 0 auto;
	}

	/deep/.el-cascader-menu__wrap.el-scrollbar__wrap {
		height: auto !important;
	}

	.el-tag {
		margin-right: 10px;
	}

	.button-new-tag {
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}
</style>
